import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'dart:async';
import '../icons/my_icon.dart';

class LoginView extends StatefulWidget {
  @override
  _LoginViewState createState() => _LoginViewState();
}

class _LoginViewState extends State<LoginView> {
  final _phoneTFController = TextEditingController();
  final _pwTFController = TextEditingController();

  final _focusNode1 = FocusNode();
  final _focusNode2 = FocusNode();

  Timer _timer;
  int _seconds = 10;
  String _vertifyStr = '获取验证码';
  bool _viertifyDisable = false;

  bool _isInputPW;
  String _login_des = '通过验证码登录';
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _login_des = '通过验证码登录';
    _isInputPW = true;
  }

  void _startTimer() {
    _seconds = 10;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_seconds <= 0) {
        _cancelTimer();
        _viertifyDisable = false;
        _vertifyStr = '重新获取验证码';
        setState(() {});
      }
      _viertifyDisable = true;

      _seconds--;
      _vertifyStr = '${_seconds}s';
      setState(() {
        if (_seconds <= 0) {
          _vertifyStr = '重新获取验证码';
        }
      });
    });
  }

  void _cancelTimer() {
    if (_timer != null) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('用户登录'),
      ),
      body: SafeArea(
        child: GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: ListView(
            children: <Widget>[
              SizedBox(
                height: 40,
              ),
              Container(
                width: 80,
                height: 115,
                child: Image(
                  image: AssetImage('image/login_logo.png'),
                ),
              ),
              SizedBox(
                height: 60,
              ),
              Container(
                margin: EdgeInsets.only(left: 20, right: 20),
                // decoration: BoxDecoration(
                //     border: Border.all(width: 1.0, color: Colors.grey[400]),
                //     borderRadius: BorderRadius.all(Radius.circular(5))),
                child: Column(
                  children: <Widget>[
                    TextField(
                      controller: _phoneTFController,
                      focusNode: _focusNode1,
                      keyboardType: TextInputType.phone,
                      maxLength: 11,
                      inputFormatters: [
                        WhitelistingTextInputFormatter.digitsOnly
                      ],
                      // onSubmitted: _phoneSubmitAction,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.phone_iphone),
                          labelText: '请输入手机号码',
                          filled: true,
                          fillColor: Colors.white10),
                    ),
                    this._isInputPW
                        ? TextField(
                            controller: _pwTFController,
                            focusNode: _focusNode2,
                            maxLength: 6,
                            decoration: InputDecoration(
                                prefixIcon: Icon(Icons.lock_outline),
                                labelText: '请输入手机密码',
                                filled: true,
                                fillColor: Colors.white10),
                            obscureText: true,
                          )
                        : Stack(
                            children: <Widget>[
                              TextField(
                                controller: _pwTFController,
                                focusNode: _focusNode2,
                                maxLength: 6,
                                decoration: InputDecoration(
                                    prefixIcon: Icon(Icons.verified_user),
                                    labelText: '请输入手机验证码',
                                    filled: true,
                                    fillColor: Colors.white10),
                                obscureText: true,
                              ),
                              Positioned(
                                right: 20,
                                bottom: 30,
                                child: Container(
                                  height: 40,
                                  // margin: EdgeInsets.only(top: 10, bottom: 10),
                                  decoration: BoxDecoration(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                      border: Border.all(
                                          color: _viertifyDisable
                                              ? Theme.of(context).primaryColor
                                              : Colors.grey[600],
                                          width: 0.8)),
                                  child: FlatButton(
                                    onPressed: () {
                                      _viertifyDisable ? null : _startTimer();
                                    },
                                    child: Text('$_vertifyStr'),
                                  ),
                                ),
                              )
                            ],
                          ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        FlatButton(
                          child: Text('$_login_des',
                              style: TextStyle(
                                  fontSize: 12,
                                  color: Theme.of(context).primaryColor)),
                          onPressed: () {
                            setState(() {
                              _isInputPW = !_isInputPW;
                              _isInputPW
                                  ? _login_des = '通过验证码登录'
                                  : _login_des = '通过密码登录';
                            });
                          },
                        ),
                        FlatButton(
                          child: Text('找回密码',
                              style: TextStyle(
                                  fontSize: 12,
                                  color: Theme.of(context).primaryColor)),
                          onPressed: () {},
                        )
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        SizedBox(
                          width: size.width - 40,
                          height: 45,
                          child: FlatButton(
                            color: Theme.of(context).primaryColor,
                            child: Text(
                              '登录',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 16),
                            ),
                            onPressed: () {
                              _phoneTFController.clear();
                              _pwTFController.clear();
                              _focusNode1.unfocus();
                              _focusNode2.unfocus();

                              Navigator.pop(context);
                            },
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        SizedBox(
                          width: size.width - 40,
                          height: 45,
                          child: FlatButton(
                            color: Colors.redAccent,
                            child: Text('注册',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16)),
                            onPressed: () {
                              _phoneTFController.clear();
                              _pwTFController.clear();
                              _focusNode1.unfocus();
                              _focusNode2.unfocus();

                              Navigator.pop(context);
                            },
                          ),
                        ),
                        SizedBox(
                          height: 40,
                        ),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Container(
                              width: (size.width - 40 - 160) / 2,
                              height: 1,
                              color: Colors.grey[200],
                            ),
                            Text(
                              '微信账号一键登录',
                              style: TextStyle(
                                  color: Colors.black45, fontSize: 12),
                            ),
                            Container(
                              width: (size.width - 40 - 160) / 2,
                              height: 1,
                              color: Colors.grey[200],
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Icon(
                          MyIcon.my_wx,
                          size: 44,
                          color: Theme.of(context).primaryColor,
                        )
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
